<template lang="pug">
    div#time-panel
        time-list(v-for="day in days",:key="day.valueOf()", :day='day')
</template>
<script>
import Moment from "moment";
import { extendMoment } from "moment-range";
const moment = extendMoment(Moment);
import TimeList from "./TimeList.vue";
export default {
  components: {
    TimeList
  },
  data() {
    return {
      days: []
    };
  },
  created() {
    const start = new moment().startOf("days");
    const end = new moment().startOf("days").add(6, "days");
    const range = moment.range(start, end);
    const days = range.by("days");
    this.days = Array.from(days);
  }
};
</script>

<style lang="stylus" scoped>
#time-panel {
  width: auto;
  display: flex;
  overflow-x: scroll;
  background-color: #fff;
}
</style>
